










<template>
  <div class="music-detail-container">
    <div class="bgc-box"></div>
     <!-- 头部 -->
     <Header>
     
         <router-link to="/index">
        <van-icon name="wap-home-o" size="30px" />
      </router-link>
   
      <div class="title">
        <div>{{songinfo.title}}</div>
        <div class="author">{{songinfo.author}}</div>
      </div>
      <van-icon name="search" size="30px" />
    </Header>
      <div class="cover">
      <img :src="songinfo.pic_premium" alt />
    </div>
     <!-- 歌词 -->
      <Lrc />
     <!-- 底部 -->
     <div class="contan">
     <van-icon name="like-o" size="30px"  @click="zan(true)" v-show="!isLike"/>
     <van-icon name="like" size="30px" color="red" @click="zan(false)" v-show="isLike"/>
      <a v-if="songinfo.title" :href="bitrate.file_link" target="_blank" :download="songinfo.title">
        <van-icon name="down" size="30px" />
      </a>
     </div>
      <!-- 播放区 -->
       <div class="audio-box">
      <audio
       
       v-if="bitrate.show_link"
       autoplay
        controls
        :src="bitrate.show_link"
      ></audio>
    </div>
  </div>
</template>

<script>
import Lrc from "./components/Lrc"
// import {getMusicDetail} from "../../api/baidu-music";
import { Dialog } from "vant";
import { mapGetters, mapState } from "vuex";
export default {
 name: "MusicDetail",
  components: {
    Lrc,

  },
  data(){
    return{
      bitrate:{},
      songinfo:{},
      isLike: false,
    }
  },
  methods:{
  zan(flag) {
      // 调用接口
      if (flag) {
        this.isLike = flag;
      } else {
        Dialog.confirm({
          title: "确定取消吗？",
          message: "您确定要取消点赞吗？",
        })
          .then(() => {
            // on confirm
            this.isLike = flag;
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
  created(){
        // getMusicDetail(this.$route.params.id).then(res => {
        //                 console.log(res)
        //                 this.bitrate = res.data.bitrate;
        //                 this.songinfo = res.data.songinfo;
        //             })
         this.$store.dispatch("initSongInfo", { songId: this.$route.params.id });
  },
  computed: {
    ...mapState({
      // msg123: "msg",
      // title: "title",
      bitrate: "bitrate",
      songinfo: "songinfo",
      processTime:"processTime",
      imgStyle:'imgStyle'
    }),
    ...mapGetters({
      num: "num",
      // searchList:"searchList"
    }),
    },
      watch:{
    processTime(){
      this.$refs.audio.currentTime = this.processTime
    }
  }
}
</script>

<style lang='less' scoped>

.bgc-box {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #f1f3f4;
  z-index: -1;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .author {
    font-size: 12px;
  }.title {
    flex-grow: 1;
    text-align: center;
  }
  }
  .cover {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 60%;
    border-radius: 50%;
    animation: rotate 18s linear infinite;
    animation-play-state:paused;
  }
}
.contan {
  display: flex;
  justify-content: space-between;
}
.audio-box {
  display: flex;
  justify-content: center;
}
</style>